<template>
  <div class="review-type">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="v in data" :key="v.courseType" :name="v.courseType">
        <span slot="label">
          <el-badge v-if="v.count" :value="v.count" :max="10" class="item">
            {{ v.name }}
          </el-badge>
          <span v-else>
            {{ v.name }}
          </span>
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: '1',
      data: [
        { courseType: '1', name: '课程元素库', count: 0 },
        { courseType: '2', name: '专业元素库', count: 0 },
        { courseType: '3', name: '兵种元素库', count: 0 },
        { courseType: '4', name: '专题库', count: 0 },
        { courseType: '5', name: '示范微视频', count: 0 },
        { courseType: '6', name: '培训课程', count: 0 },
        { courseType: '11', name: '用户审核', count: 0 },
        { courseType: '21', name: '思政元素', count: 0 },
      ],
    }
  },
  props: ['flowRunTaskVOList', 'type'],
  watch: {
    flowRunTaskVOList: {
      immediate: true,
      handler() {
        this.dataFilter()
      },
    },
  },
  methods: {
    dataFilter() {
      this.data.forEach((v) => {
        v.count = 0
      })
      if (this.type == 'review') {
        this.data = this.data.filter((v) => v.courseType <= 6)
      }
      if (!this.flowRunTaskVOList.length) {
        for (var i = 0; i < this.data.length; i++) {
          this.data[i].count = 0
        }
        return
      }
      this.flowRunTaskVOList.forEach((v) => {
        for (var i = 0; i < this.data.length; i++) {
          if (this.data[i].courseType == v.courseType) {
            this.data[i].count = v.noAudit
          }
        }
      })
    },
    handleClick() {
      this.$emit('e-courseType', this.activeName)
    },
  },
}
</script>
<style scoped>
.review-type >>> .el-badge__content.is-fixed {
  top: 9px;
  right: 3px;
}
</style>